<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="80%"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="离职员工"
        prop="user_id"
        class="label-right-align"
        label-width="120px"
        :disabled="formData.user_id"
        required
      >
        <el-select
          v-model="formData.user_id"
          filterable
          placeholder="请输入员工姓名搜索"
          style="width: 240px"
          default-first-option
        >
          <el-option
            v-for="item in userOptions"
            :key="item.user_id"
            :label="item.user.real_name"
            :value="item.user_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="离职确认"
        prop="asset"
        class="required label-right-align"
        label-width="120px"
      >
        <el-upload
          class="upload-demo"
          :action="apiUrl + '/upload/file'"
          accept=".doc,.docx,.pdf"
          name="iFile"
          :auto-upload="true"
          :limit="1"
          :data="{ group_id: -1, file_type: 'file' }"
          :headers="{ Token: userStore.token, appid: userStore.app_id }"
          :on-success="
            (response, file, fileList) =>
              handleFile(response, file, fileList, 'confirm')
          "
          ref="uploadConfirm"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">请上传文件，文件不要超过5M</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="财务确认"
        prop="asset"
        class="required label-right-align"
        label-width="120px"
      >
        <el-upload
          class="upload-demo"
          :action="apiUrl + '/upload/file'"
          accept=".doc,.docx,.pdf"
          name="iFile"
          :auto-upload="true"
          :limit="1"
          :data="{ group_id: -1, file_type: 'file' }"
          :headers="{ Token: userStore.token, appid: userStore.app_id }"
          :on-success="
            (response, file, fileList) =>
              handleFile(response, file, fileList, 'asset')
          "
          ref="uploadAsset"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">请上传文件，文件不要超过5M</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="离职退群确认"
        prop="contact"
        class="required label-right-align"
        label-width="120px"
      >
      <el-upload
            class="upload-demo"
            :action="apiUrl + '/upload/file'"
            accept=".doc,.docx,.pdf"
            name="iFile"
            :auto-upload="true"
            :limit="1"
            :data="{ group_id: -1, file_type: 'file' }"
            :headers="{ Token: userStore.token, appid: userStore.app_id }"
            :on-success="
              (response: any, file: any, fileList: any) =>
                handleFile(response, file, fileList, 'contact')
            "
            ref="uploadContact"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">请上传文件，文件不要超过5M</div>
            </template>
          </el-upload>
      </el-form-item>
      <el-form-item
        label="其他说明"
        prop="content"
        class="required label-right-align"
        label-width="120px"
      >
        <Uediter
          v-model="formData.content"
          :config="ueditor.config"
          ref="ue"
        ></Uediter>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import Uediter from "@/components/UE.vue";
import { addLeaveApi, staffOptionApi } from "@/api/company/staff";
import useUserStore from "@/store/model/user";
const uploadConfirm = ref<any>(null);
const uploadAsset = ref<any>(null);
const uploadContact = ref<any>(null);
const apiUrl = import.meta.env.VITE_BASIC_URL;
const userStore = useUserStore();
const dialogFormVisible = ref(false);
const formRef = ref(null);
const userOptions = ref<any[]>([]);
const dialogTitle = ref("");
const ue = ref<any>(null);
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    initialFrameWidth: 800,
    initialFrameHeight: 400,
  },
});
const formData = ref({
  user_id: "",
  content: "",
  asset: "",
  contact: "",
  confirm:"",
});

const rules = reactive({
  user_id: [
    {
      required: true,
      message: "请选择离职员工",
    },
  ],
  confirm: [
    {
      required: true,
      message: "请上传离职确认文件",
    },
  ],
});

const emits = defineEmits(["getTable"]);
function submitForm() {
  formRef.value.validate().then(() => {
    addLeaveApi(formData.value)
      .then((res) => {
        ElMessage.success("办理成功");
        emits("getTable");
        dialogClose();
      })
      .catch((err) => {});
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const handleOpen = (id: number) => {
  dialogFormVisible.value = true;
  dialogTitle.value = "员工离职";
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    user_id: "",
    content: "",
    asset: "",
    contact: "",
    confirm:""
  };
  dialogFormVisible.value = false;
};
const handleFile = (res: any, file: any, fileList: any, type: string) => {
  if (res.code != 1) {
    ElMessage.error(res.msg);
  } else {
    switch(type){
      case "confirm":
        formData.value.confirm = res.data.file_path;
        //uploadConfirm.value.clearFiles();
        break;
      case "asset":
        formData.value.asset = res.data.file_path;
        //uploadAsset.value.clearFiles();
        break;
      case "contact":
        formData.value.contact = res.data.file_path;
        //uploadContact.value.clearFiles();
        break;
    }
  }
};
onMounted(() => {
  staffOptionApi().then((res: any) => {
    userOptions.value = res.data;
  });
});
defineExpose({
  handleOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
